<template>
	<view class="main-content">
		<scroll-view scroll-y class="list-box" :style="{'height': '100vh' }">
			<text class="title">{{articleDetail.title}}</text>
			<view class="publisher">
				<!-- <image src="" mode="widthFix"></image> -->
				<view>
					<!-- <text>消易云</text> -->
					<text>{{articleDetail.createTime|forrmatterTime}} 发布</text>
				</view>
			</view>
			<rich-text class="text-content" :nodes="articleDetail.contentText"></rich-text>
		</scroll-view>
	</view>
</template>

<script>
	import Common from '@/api/common.js'
	export default {
		data() {
			return {
				articleDetail: {},
			}
		},
		onLoad(e) {
			console.log(e)
			this.articleId = e.id;
			this.getArticleDetail()
		},
		filters: {
			forrmatterTime(time) {
				if(!time || time == '') return "";
				return time.split(" ")[0]
			}
		},
		methods: {
			// 获取文章列表
			async getArticleDetail() {
				let res = await Common.getArticleDetail(this.articleId);
				this.articleDetail = Object.assign(res.data, {contentText: this.formatterImage(res.data.contentText)});
			},
			formatterImage(data) {
				var jsonDa = JSON.stringify(data).replace(/<img/gi, "<img class='richImg'style='width:100%!important;height:auto!important;max-height:100%;'");
				var newResData = JSON.parse(jsonDa);
				return newResData;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.richImg {
		 max-width: 100%;
		  max-height: 100%;
		  vertical-align: middle;
		  height: auto!important;
		  width: auto!important;
	}
	.main-content {
		width: 100%;
		height: 100vh;
		image, img {
			width: 100% !important;
			align-self: center!important;;
			object-fit: cover!important;;
		}
		.list-box {
			padding: 20rpx 30rpx;
			background: #ffffff;
	
			.title {
				font-family: "PingFang SC";
				font-size: 40rpx;
				font-style: normal;
				font-weight: bold;
				line-height: 60rpx;
			}
	
			.publisher {
				display: flex;
				align-items: center;
				margin: 30rpx 0;
				color: #666;
			}
	
			.text-content {
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 56rpx;
				opacity: 0.9;
				text-indent: 1rem;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>